<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" href="css/index.css">
		<script src="js/vue.min.js"></script>
		<script src="js/elementui.js"></script>
		<script src="js/axios.min.js"></script>
		<script src="js/mycommon.js"></script>
	</head>
	<body>
		<div id="app">
			<fieldset style="border: 1px solid gainsboro;margin-bottom: 4px;">
				<legend><i class="el-icon-search" style="color:#bfb6a3 ;">查询</i></legend>
				<el-form size="mini" :inline="true" :model="formInline" class="demo-form-inline">
					<el-form-item label="标题">
						<el-input v-model="formInline.user" placeholder="标题"></el-input>
					</el-form-item>

					<el-form-item>
						<el-button type="primary" @click="onSubmitselect">查询</el-button>
					</el-form-item>
				</el-form>
			</fieldset>


			<el-table size="mini" :data="tableData" style="width: 100%">
				<el-table-column prop="name" label="姓名" width="180">
				</el-table-column>
				<el-table-column prop="phone" label="电话" width="180">
				</el-table-column>
				<el-table-column prop="address" label="地址">
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
						<el-button size="mini" type="danger"
							@click="handleDelete(scope.$index, scope.row)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<el-pagination background layout="prev, pager, next" :total="total" :page-size="pagesize"
				@current-change="handleCurrentChange">
			</el-pagination>

			<!-- 编辑 -->
			<el-dialog title="修改药品" :visible.sync="dialogVisibleup" width="50%">
				<el-form size="mini" ref="form" :model="formInline" label-width="80px">
					<el-form-item label="姓名">
						<el-input v-model="formInline.name"></el-input>
					</el-form-item>
					<el-form-item label="电话">
						<el-input v-model="formInline.phone"></el-input>
					</el-form-item>
					<el-form-item label="地址">
						<el-input v-model="formInline.address"></el-input>
					</el-form-item>

				</el-form>
				<span slot="footer" class="dialog-footer">
					<el-button size="mini" @click="dialogVisibleup = false">取 消</el-button>
					<el-button size="mini" type="primary" @click="onSubmitup">修 改</el-button>
				</span>
			</el-dialog>
		</div>
		<script>
			new Vue({
				el: "#app",
				data: {
					formInline: {
						address: "",
						phone: "",
						name: "",
						id: ""
					},
					tableData: [{
						address: "",
						phone: "",
						name: "",
						id: ""
					}],
					page: 1, //默认为第一页
					pagesize: 1, //每页显示条数
					total: 0, //总条数
					dialogVisibleup: false
				},
				methods: {
					onSubmitselect() { //查询

					},
					handleEdit(index, row) { //编辑
						this.dialogVisibleup = true
						var that = this;
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "selectaddressid/", {
							"id": row.id
						}).then(function(res) {
							// alert(JSON.stringify(res))
							that.formInline=res.data.data.byId
						}).catch(err => {
							console.log(err)
						});
					},
					handleDelete(index, row) { //删除
					var that = this;
					//ajax请求后端接口获取json数据
					axios.post(HTTP + "deleteaddressid/", {
						"id": row.id
					}).then(function(res) {
						if (res.data.code == 200) {
							that.$message("删除成功");
							that.initdata();
						} else {
							that.$message("删除失败");
							that.initdata();
						}
					}).catch(err => {
						console.log(err)
					});

					},
					onSubmitup() { //修改成功
						this.dialogVisibleup = false
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "updateaddress/" , this.formInline).then(function(res) {
							if (res.data.code == 200) {
								that.$message("修改成功");
								that.initdata();
							} else {
								that.$message("修改失败");
								that.initdata();
							}

						}).catch(err => {
							console.log(err)
						});
					},
					handleCurrentChange(val) { //分页
						this.page = val //舍子当前页
						this.initdata() //发送ajax请求重新获取数据
					},
					initdata() { //初始数据
						var that = this
						//ajax请求后端接口获取json数据
						axios.post(HTTP + "selectaddress/" + this.page).then(function(res) {
							// alert(JSON.stringify(res));
							that.tableData = res.data.data.pageInfo.list
							that.total = res.data.data.pageInfo.total
							that.pagesize = res.data.data.pageInfo.pageSize

						}).catch(err => {
							console.log(err)
						});
					},
				},
				mounted() {
					this.initdata();
				}
			})
		</script>
	</body>

</html>